<template>
  <div>
    <ul class="wrap">
      <li class="list" v-for="(item, index) in mugArr" :key="index">
        <div v-if="index % 2 === 0">
          <img :src="item.img" alt="" />
          <div class="list-box">
            <h3>{{ item.title }}</h3>
            <div>{{ item.content }}</div>
            <button @click="toEsliteParticularsHandle">商品详情</button>
          </div>
        </div>
        <div v-else>
          <div class="list-box2">
            <h3>{{ item.title }}</h3>
            <div>{{ item.content }}</div>
            <button @click="toEsliteParticularsHandle">商品详情</button>
          </div>
          <img :src="item.img" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mugArr: [],
    };
  },
  mounted() {
    this.$api.ChengpinInfo().then((res) => {
      if (res.data.success) {
        var arr = res.data.chengpinInfo;
        for (var i = 0; i < arr.length; i++) {
          arr[i].img =
            "http://iwenwiki.com/api/" + String(arr[i].img).slice(24);
        }
        this.mugArr = arr;
      }
    });
  },
  methods: {
    toEsliteParticularsHandle() {
      this.$router.push("/eslite/eslitemug");
      this.$bus.$emit("esliteMugIndex", 1002);
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}
.list {
  text-align: left;
  overflow: hidden;
  background: #fff;
  img {
    width: 600px;
    float: left;
  }
  .list-box,
  .list-box2 {
    width: 600px;
    float: left;
    padding: 40px 50px;
    box-sizing: border-box;
    div {
      margin: 30px 0 20px;
      color: #999;
      font-size: 12px;
      line-height: 25px;
    }
    button {
      background: rgb(219, 55, 55);
      font-size: 20px;
      padding: 10px 20px;
      color: #fff;
      letter-spacing: 10px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
  .list-box2 {
    padding: 150px 50px;
  }
}
</style>